<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
	<HEAD>
		<META CONTENT="text/html; charset=UTF-8" HTTP-EQUIV="Content-Type">
		<TITLE>PI.JS > Object Oriented Programming with pi.js</TITLE>
		<LINK HREF="../../../inc/template.css" REL="stylesheet">
		<LINK HREF="../../../inc/template.css" REL="stylesheet">
		<SCRIPT SRC="../../../source/pi.1.1.1.js" TYPE="text/javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/template.js" TYPE="text/javascript"></SCRIPT>
		<LINK HREF="../../../inc/sh/SyntaxHighlighter.css" TYPE="text/css" REL="stylesheet">
		<SCRIPT SRC="../../../inc/sh/shCore.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushJScript.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushCss.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushXml.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushPhp.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushPython.js" LANGUAGE="javascript"></SCRIPT>
	</HEAD>
	<BODY>
		<A HREF="/" ID="header" CLASS="Header">
			<EM></EM>
		</A>
		<DIV CLASS="Index">
			<DIV ID="indexContainer" CLASS="ListContainer">
				<A HREF="../../../index.html" CLASS="Button "><EM>About Pi</EM></A>
				<A HREF="../../../pages/Downloads" CLASS="Button "><EM>Downloads</EM></A>
				<A HREF="../../../documentation/index.html" CLASS="Button SelectedButton"><EM>Documentation</EM></A>
				<DIV CLASS="SubNavigation">
					<DIV>
						<H2 CLASS="Title">Essential Documents</H2>
						<UL>
							<LI>
								<A STYLE="" HREF="../../../documentation/essential/Getting Started to pi.js/">Getting Started to pi.js</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/essential/Object Oriented Programming with pi.js/">Object Oriented Programming with pi.js</A>
							</LI>
						</UL>
					</DIV><DIV>
						<H2 CLASS="Title">Reference</H2>
						<UL>
							<LI>
								<A STYLE="" HREF="../../../documentation/env/pi.env/">pi.env</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/get/pi.get/">pi.get</A>
							</LI><LI>
								<A STYLE="font-weight:bold" HREF="../../../documentation/util/pi.util/">pi.util</A>
								<UL>
									<LI>
										<A HREF="../../../documentation/util/pi.util.Array/">pi.util.Array</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Element/">pi.util.Element</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Hash/">pi.util.Hash</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Number/">pi.util.Number</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.String/">pi.util.String</A>
									</LI>
								</UL>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/base/pi.base/">pi.base</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/element/pi.element/">pi.element</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/xhr/pi.xhr/">pi.xhr</A>
							</LI><LI>
								<SPAN STYLE="font-weight:bold">Native Objects</SPAN>
								<UL>
									<LI>
										<A HREF="../../../documentation/Native Objects/Array/">Array</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/Function/">Function</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/Number/">Number</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/String/">String</A>
									</LI>
								</UL>
							</LI><LI>
								<SPAN STYLE="font-weight:bold">Plugins</SPAN>
								<UL>
									<LI>
										<A HREF="../../../documentation/plugin/pi.comet/">pi.comet</A>
									</LI><LI>
										<SPAN>pi.cache</SPAN>
									</LI><LI>
										<SPAN>pi.layer</SPAN>
									</LI><LI>
										<A HREF="../../../documentation/plugin/pi.storage/">pi.storage</A>
									</LI><LI>
										<SPAN>pi.win</SPAN>
									</LI>
								</UL>
							</LI>
						</UL>
					</DIV>
				</DIV>
				<A HREF="../../../pages/Plugins" CLASS="Button "><EM>Plugins</EM></A>
				<A HREF="http://groups.google.com/group/pi-js" CLASS="Button"><EM>Developer Forum</EM></A>
				<A HREF="http://code.google.com/p/pi-js/issues/list" CLASS="Button"><EM>Issues</EM></A>
			</DIV>
		</DIV>
		<!-- <h3 class="ContentNav" id="contentTitle">
			<div>
				<a class="Sel">index.html</a>
			</div>
		</h3>-->
		<DIV ID="documentationContent" CLASS="Content">
			<DIV CLASS="Pad">
				<H1 CLASS="Name">Object Oriented Programming with pi.js<EM CLASS="DocumentationTitleVersion">2009-01-06 09:23:30</EM></H1>
				<DIV>
				<H2 CLASS="Title">Summary</H2>
				When creating classes with Javascript, various difficulties appear. Pi provides a modern technique which solves these issues.
				</DIV>
				<DIV CLASS="Text">
					Pi's added extend method for the Function native class, leads to creating classes that are extending other classes. To create a new class, pi.base object can be extended.
<PRE NAME="code" CLASS="js">
var product = pi.base.extend({
	"$Init":function(_name){
		this.env.setName(_name);
		return this;
	},
	"buy":function(){ 
		confirm("It's {0}, do you want to buy?".format( this.env.getPrice() ));
	},
	"env":{
		"_price":"$0", "_name":"", "_color":"",
		"setPrice":function(_value){
			this._setPrice("$"+_value);
			return this._parent_;
		}
	}
});
</PRE>
As seen by the example, we send a prototype object to the extend function and we get a Javascript class as response. Also, to define a constructor, we have created a function called $Init.  
<H2 CLASS="Title">Using Objects And Arrays as Members</H2>
We can restrain variables in object and array formats for classes that are created by pi.base. These type of variables will be automatically cloned. If you do not want cloning, send true value as second parameter. Alsin, add a value called _parent_ to hash members. This way, it is possible to reach one higher level object.
<H2 CLASS="Title">Private Members</H2>
To define a private member, use underscore. Pi, creates the get-set accessors for private member automatically. Let's try the examples accessors of the products objects;
<PRE NAME="code" CLASS="js">
>>> var bicycle = new product("bmx");
>>> bicycle.env.getName()
"bmx"
>>> bicycle.env.setName("bianchi")
>>> bicycle.env.getName()
"bianci"
</PRE>
Sometimes you need to create a custom get/set accessor. Pi will create the accessor functions with a udnerscore as prefix.Please inspect the setPrice function of the example above. Now, lets try this function;
<PRE NAME="code" CLASS="js">
>>> var bicycle = new product("bmx");
>>> bicycle.env.setPrice(200);
>>> bicycle.env.getPrice();
"200$"
>>> bicycle.env._setPrice(200);
>>> bicycle.env.getPrice();
200
</PRE>
<H2 CLASS="Title">Chaining</H2>
 Classes that are created by pi are prepared for chained value definition, the automatically created get/set accessors returns the parent object. For example,
<PRE NAME="code" CLASS="js">
>>> var bicycle = new product("bmx").env.setPrice(20).env.setColor("blue");
>>> bicycle.getColor()
"blue"
</PRE>
<H2 CLASS="Title">Extending</H2>
<PRE NAME="code" CLASS="js">
var person = pi.base.extend({ 
	"$Constructor":function(a,s,l){ 
		this.age = a; 
		this.gender = s; 
		this.location = location; 
	}, 
	age:0, gender:"", location:"" 
});

var member = person.extend({ 
	"$Constructor":function(a,s,l,email,password){
		this.email=email;
		this.password=password;
		person["$Constructor"].call(this,a,s,l);
	},
	"email":"", 
	"name":"", 
	"password":""
});
</PRE>
First we have created a class named human and after that a class named member which includes human class.For processing the values that we get from the person class, we have used the function person at the and of the constructor.Now let's try new classes;
<PRE NAME="code" CLASS="js">
>>> var selo = new human(50,'male','istanbul'); 
>>> selo.age; 
50
>>> var devrim = new member(30,'female','istanbul','foo@kodfabrik.com','12345'); 
>>> devrim.age;
30
>>> devrim.email;
'foo@kodfabrik.com' 
</PRE>
				</DIV>
				<DIV>
				<H2 CLASS="Title">See Also</H2>
				<UL>
					<LI>
						<A HREF="../../../documentation/util/pi.util/Methods/extend/">util.Extend</A>
					</LI><LI>
						<A HREF="../../../documentation/Native%20Objects/Function/Methods/extend/">Function.extend</A>
					</LI><LI>
						<A HREF="../../../documentation/pi.util.Array/Methods/clone/">util.Array.clone</A>
					</LI><LI>
						<A HREF="../../../documentation/pi.util.Hash/Methods/clone/">util.Hash.clone</A>
					</LI>
				</UL>
				</DIV>
			</DIV>
		</DIV>
		<DIV CLASS="Clean"></DIV>
	</BODY> 
</HTML>